<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用 3实现数据可视化(9-16)</title>
		<style>
			.bar {
				width: 25px;
				height: 100px;
				display: inline-block;
				background-color: #1adacf;
				/* margin: 0 5px; */
			}
			.bar:nth-of-type(odd){
				background-color: #208eff;
			}
		</style>
		<!--【引入d3.js库】-->
		<script src="http://d3js.org/d3.v3.js"></script>
		
	</head>
	<body>
		<h3>用 D3 添加 Class</h3>
		<p>在编辑器中添加attr()方法，给div元素添加类名bar。</p>
		<div id="box7"></div>
		<script src="./07-add-classes-with-d3.js" type="text/javascript"></script>
		<hr>
		<!-- ======================== -->
		<h3>动态更新元素的高度</h3>
		<p>在编辑器中添加style()方法给每个元素设置height属性。使用回调函数返回数据点的值加上字符串 "px"。</p>
		<div id="box8"></div>
		<script src="./08-update-the-height-of-an-element-dynamically.js" type="text/javascript"></script>
		<hr>
		<!-- ======================== -->
		<h3>更改条形图的显示方式</h3>
		<p>在style()方法中修改回调函数，使它返回 5 倍原数值的值（在后面加上 "px"）。</p>
		<p>
			<b>提示:</b>
			通过给每一个数值点乘以相同的常量值仅仅改变比例。这就像放大，它不会改变底层数据的含义。
		</p>
		<div id="box9"></div>
		<script src="./09-change-the-presentation-of-a-bar-chart.js" type="text/javascript"></script>
		<hr>
		<!-- ======================== -->
		<h3>了解 D3 中的 SVG</h3>
		<p>
			用append()给id为box10加一个svg节点。分别使用attr()给这个svg一个width属性和一个height属性，并分别将它们设置为给定的常量w和给定的常量h。
		</p>
		<p><b>提示： </b>width和height属性没有单位，它们是来定义缩放的。但无论怎么缩放，这个svg元素的宽高比永远是 5:1 。</p>
		<div id="box10"></div>
		<script src="./10-learn-about-svg-in-d3.js" type="text/javascript"></script>
		<hr>
		<!-- ======================== -->
		<h3>用 SVG 显示形状</h3>
		<p>用append()方法给svg添加一个rect图形。<br>将它的width属性设置为 25，height属性设置为 100，x和y属性都设置为 0。</p>
		<div id="box11"></div>
		<script src="./11-display-shapes-with-svg.js" type="text/javascript"></script>
		<!-- <script src="" type="text/javascript"></script> -->
		<hr>
		<!-- ======================== -->
		<h3>为集合中的每个数据点创建一个 Bar</h3>
		<p>用data()、enter()、append()方法为dataset中的每一个对象创建并添加一个rect。<br>每一组都将直接显示在上一组的上面，将上一组覆盖</p>
		<div id="box12"></div>
		<script src="./12-create-a-bar-for-each-data-point-in-the-set.js" type="text/javascript"></script>
		<hr>
		<!-- ======================== -->
		<h3>动态设置每个 Bar 的坐标</h3>
		<p>改变x属性的回调函数，让它返回下标乘以 30 的值。<br>
			<b>提示：</b>每组的宽为 25，所以每次x增加 30 可在每组之间留出一些空隙。在这个例子中任何比 25 大的数也同样适用。</p>
		<div id="box13"></div>
		<script src="./13-dynamically-set-the-coordinates-for-each-bar.js" type="text/javascript"></script>
		<hr>
		<!-- ======================== -->
		<h3>动态更改每个条的高度</h3>
		<p>改变height属性的回调函数，让它返回数据值乘以 3 的值。</p>
		<div id="box14"></div>
		<script src="./14-dynamically-change-the-height-of-each-bar.js" type="text/javascript"></script>
		<hr>
		<!-- ======================== -->
		<h3>反转 SVG 元素</h3>
		<p>改变y属性的回调函数，让条形图向上放置。<br>height的值是 3 倍d的值。</p>
		<div id="box15"></div>
		<script src="./15-invert-svg-elements.js" type="text/javascript"></script>
		<hr>
		<!-- ======================== -->
		<h3>更改 SVG 元素的颜色</h3>
		<p>
添加attr()方法，将所有组的 "fill" 设置为 "navy"。</p>
		<div id="box16"></div>
		<script src="./16-change-the-color-of-an-svg-element.js" type="text/javascript"></script>
		<hr>
		<!-- ======================== -->
		
		
		
	</body>
</html>
